<template>
  <div>
    <Header />
    <Right />
    <div class="zoon"></div>
    <div class="crumb">
      <span>全部房产</span> >
      <span>详情页</span>
    </div>
    <div class="house">
      <div class="house_name">
        <p class="name_left">{{ details.title }}</p>
        <p class="name_right">
          <span @click="Onfollow()" class="right_img">
            <img src="../../assets/img/ygzfy.png" alt v-if="details.ynFollow != '1'" />
            <img src="../../assets/img/ygz.png" alt v-else s />
            关注房源
          </span>
          <span @click="disQRcode = true">
            <img src="../../assets/img/fxfy.png" alt />
            分享房源
          </span>
          <span @click="Onorder()">
            <img src="../../assets/img/yykf.png" alt />
            预约看房
          </span>
        </p>
      </div>
      <p class="village">
        小区名称：{{ details.communityName }} /所在区域：{{
        details.countyName
        }}/房源编号：{{ details.id }}/审核时间：2020-09-02 17:18
      </p>
      <div class="house_center">
        <div class="carousel">
          <Swiper :img="details.imgUrl" />
        </div>
        <div class="center">
          <p class="center_font">{{ details.title }}</p>
          <p class="tariff">
            <span class="price">
              {{ details.startSalePrice }}
              <span class="company">万(起拍价）</span>
            </span>
            <span class="market">
              市场价：
              <span v-if="details.marketSalePrice">
                {{
                details.marketSalePrice
                }}
              </span>
              <span v-else>--</span>万
            </span>
            <span class="market" v-if="details.sellStage == '拍卖结束'">成交价：{{ details.completePrice }}万</span>
            <!-- <span class="price" v-if="details.sellStage == '拍卖结束'">
              {{ details.completePrice }}
              <span class="company">万(成交价）</span>
            </span>-->
          </p>
          <div class="house_type">
            <div class="allTypes">
              <p class="room">{{ details.bedRoomCount }}室{{ details.visitorRoomCount }}厅</p>
              <p class="room_title">房屋户型</p>
            </div>
            <div class="allTypes">
              <p class="room" v-if="details.coveredArea">{{ details.coveredArea }} ㎡</p>
              <p class="room" v-else>--</p>
              <p class="room_title">建筑面积</p>
            </div>
            <div class="allTypes">
              <p class="room" v-if="details.directionName">{{ details.directionName }}</p>
              <p class="room" v-else>--</p>
              <p class="room_title">房屋朝向</p>
            </div>
            <div class="allTypes">
              <p class="room">{{ details.floor }}层/共{{ details.totalFloor }}层</p>
              <p class="room_title">所在楼层</p>
            </div>
            <div class="allTypes">
              <p class="room" v-if="details.houseTypeName">{{ details.houseTypeName }}</p>
              <p class="room" v-else>--</p>
              <p class="room_title">房屋类型</p>
            </div>
            <div class="allTypes">
              <p class="room" v-if="details.buildDateStr">{{ details.buildDateStr }}</p>
              <p class="room" v-else>--</p>
              <p class="room_title">建筑年代</p>
            </div>
          </div>
          <div class="alldetails">
            <p class="details_name">
              <span class="details_name">小区名称</span>
              <span class="details_center" v-if="details.communityName">
                {{
                details.communityName
                }}
              </span>
              <span class="details_center" v-else>--</span>
            </p>
            <p class="details_name">
              <span class="details_name">性质</span>
              <span class="details_center" v-if="details.houseNatureName">
                {{
                details.houseNatureName
                }}
              </span>
              <span class="details_center" v-else>--</span>
            </p>
            <p class="details_name">
              <span class="details_name">保证金金额</span>
              <span class="details_center" v-if="details.bond">{{ details.bond }}万</span>
              <span class="details_center" v-else>--</span>
            </p>
            <p class="details_name">
              <span class="details_name">所在区域</span>
              <span class="details_center" v-if="details.countyName">
                {{
                details.countyName
                }}
              </span>
              <span class="details_center" v-else>--</span>
            </p>
            <p class="details_name">
              <span class="details_name">阶段</span>
              <span class="details_center" v-if="details.sellStage">
                {{
                details.sellStage
                }}
              </span>
              <span class="details_center" v-else>--</span>
            </p>
          </div>
          <div>
            <p class="details_line">
              <!-- <span class="details_name">倒计时</span>
              <span class="details_center">{{ details.bondEndDateStr }}</span>-->
              <span class="remind" @click="Onremind">
                <img src="../../assets/img/sztx.png" alt />
                设置提醒
              </span>
            </p>
            <p class="details_line">
              <span class="details_name">开拍时间</span>
              <span class="details_center" v-if="details.startSaleTimeStr">
                {{
                details.startSaleTimeStr
                }}
              </span>
              <span class="details_center" v-else>--</span>
            </p>
          </div>
          <!-- 经纪人 -->
          <!-- <div
            class="agent"
            v-if="details.manager"
            @click="Onmanager(details.manager.id)"
          >
            <img :src="details.manager.headUrl" alt class="portrait" />
            <div>
              <p>
                <span class="name">{{ details.manager.name }}</span>
                <span class="broker">法拍经理</span>
              </p>
              <p class="peoper">
                <span>服务人数：{{ details.manager.customerNum }}人</span>
                <span>满意度99%</span>
              </p>
              <p class="peoper">
                <span @click="On53">
                  <img src="../../assets/img/zxzx.png" alt />
                  在线咨询
                </span>

                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="details.manager.telephone"
                  placement="top-start"
                >
                  <span>
                    <img src="../../assets/img/blue_phone.png" alt />
                    电话咨询
                  </span>
                </el-tooltip>
              </p>
            </div>
          </div>-->
        </div>
      </div>
    </div>
    <div class="loan" @click="Onloan()">
      <img src="../../assets/img/loan.png" alt />
    </div>

    <div class="village">
      <p>
        <img src="../../assets/img/line.png" alt />
        <span class="village_title">小区配套:</span>
      </p>
      <p class="village_name" v-if="details.community">
        <span class="address">{{ details.community.name }}</span>
        <!-- （本小区共有拍卖房产2套） -->
      </p>

      <div class="introduce">
        <div class="introduce_top">
          <div class="present" v-if="details.community">
            <!-- <p>
              <span class="introduce_title">当月成交均价</span>
              <span>￥36123元</span>
            </p>-->
            <p>
              <span class="introduce_title">建筑年代:</span>
              <span v-if="details.community.houseTime">
                {{
                details.community.houseTime
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">所在板块:</span>
              <span v-if="details.community.plate">
                {{
                details.community.plate
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">总户数:</span>
              <span v-if="details.community.householdNum">
                {{
                details.community.householdNum
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">物业费用:</span>
              <span v-if="details.community.propertyFee">
                {{
                details.community.propertyFee
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">建筑面积:</span>
              <span v-if="details.community.floorage">
                {{
                details.community.floorage
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">容积率:</span>
              <span v-if="details.community.plotRatio">
                {{
                details.community.plotRatio
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">绿化率:</span>
              <span v-if="details.community.greeningRate">
                {{
                details.community.greeningRate
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">小区评估价:</span>
              <span v-if="details.community.assess">
                {{
                details.community.assess
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">停 车 位:</span>
              <span v-if="details.community.parkingSpace">
                {{
                details.community.parkingSpace
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">开 发 商:</span>
              <span v-if="details.community.developers">
                {{
                details.community.developers
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">详细地址:</span>
              <span v-if="details.community.address">
                {{
                details.community.address
                }}
              </span>
              <span v-else>--</span>
            </p>
            <p>
              <span class="introduce_title">物业公司:</span>
              <span v-if="details.community.property">
                {{
                details.community.property
                }}
              </span>
              <span v-else>--</span>
            </p>
          </div>
          <div v-if="details.community">
            <p class="buildings">房屋特色</p>
            <p class="buildings_item">
              <span v-for="(item, index) in details.houseLabelNameList" :key="index">{{ item }}</span>
            </p>
          </div>
        </div>
        <div v-if="details.manager">
          <p class="agent_title">法拍经理</p>
          <div class="agent" @click="Onmanager(details.manager.id)">
            <img :src="details.manager.headUrl" alt class="portrait" />
            <div>
              <p>
                <span class="name">{{ details.manager.name }}</span>
                <span class="broker">法拍经理</span>
              </p>
              <p class="peoper">
                <span>从业：{{ details.manager.workYear }}年</span>
                <span>服务客人：{{ details.manager.customerNum }}人</span>
              </p>
              <p class="peoper">
                <span>满意度{{ details.manager.evaluate }}%</span>
              </p>
              <p class="consult" @click="On53">
                <img src="../../assets/img/zxzx.png" alt />
                <span>在线咨询</span>
              </p>
            </div>
          </div>
          <!-- <div class="agent">
            <img src="../../assets/img/demo.png" alt class="portrait" />
            <div>
              <p>
                <span class="name">黄晓明</span>
                <span class="broker">法拍经理</span>
              </p>
              <p class="peoper">
                <span>从业：5年</span>
                <span>服务客人：233人</span>
              </p>
              <p class="peoper">
                <span>满意度99%</span>
              </p>
              <p class="consult">
                <img src="../../assets/img/zxzx.png" alt />
                <span>在线咨询</span>
              </p>
            </div>
          </div>-->
          <!-- <p class="progress">当前有81人正在咨询法拍服务…</p> -->
        </div>
      </div>
    </div>
    <!-- 周边配套 -->
    <div class="periphery">
      <p>
        <img src="../../assets/img/line.png" alt />
        <span class="village_title">小区配套</span>
      </p>
      <div class="map">
        <Map :lng="details.lng" :lat="details.lat" />
      </div>
    </div>
    <Recommend @OnId="OnId" />
    <Footer />
    <!-- 贷款弹框 -->
    <el-dialog :visible.sync="disable" width="30%" center class="loan_dialog">
      <p class="title">
        法拍房性价比高,
        <span class="text">拍卖金</span>不够怎么办
      </p>
      <div class="nothing">
        <div>
          <img src="../../assets/img/wh.png" alt />
          <p>没有资金</p>
        </div>
        <div>
          <img src="../../assets/img/wh.png" alt />
          <p>没有资金</p>
        </div>
        <div>
          <img src="../../assets/img/wh.png" alt />
          <p>没有资金</p>
        </div>
      </div>
      <el-input
        placeholder="请输入手机号"
        v-model="input3"
        class="input-with-select"
        style="margin-bottom:15px"
      >
        <el-button slot="append">
          <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
          <span v-else>{{ second }}s</span>
        </el-button>
      </el-input>
      <el-input v-model="input" placeholder="请输入验证码"></el-input>
      <p class="loan_btn" @click="OnpersonalLoan">定制个性化贷款服务</p>
    </el-dialog>
    <el-dialog
      :visible.sync="disQRcode"
      :append-to-body="true"
      :lock-scroll="false"
      title="扫一扫分享好友"
      width="300px"
      :close-on-click-modal="true"
      class="subscribe"
      center
    >
      <!-- <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> -->
      <vue-qr :text="text" :size="200"></vue-qr>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="30%"
      class="sign_dialog"
      :close-on-click-modal="true"
    >
      <LoginName v-on:OndialogTable="Ondiong" />
    </el-dialog>
  </div>
</template>
<script>
import Swiper from "@/components/pc_file/swiper";
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
import Right from "@/components/pc_file/right.vue";
import Recommend from "@/components/pc_file/recommend.vue";
import Map from "@/components/pc_file/map.vue";
import vueQr from "vue-qr";
import LoginName from "@/components/pc_file/dialog/sign.vue";
export default {
  data() {
    return {
      disable: false,
      input: "",
      input3: "",
      details: "",
      show: true,
      timer: null,
      second: 60,
      verifyCode: "",
      disQRcode: false,
      dialogTableVisible: false,
      text: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.text = `http://www.rdfapai.com/#/mdetails?id=${this.id}`;
    this.OngetHouseDetail();
  },
  watch: {
    $route() {
      this.details = "";
      this.id = this.$route.query.id;
      this.text = `http://www.rdfapai.com/#/mdetails?id=${this.id}`;
      this.OngetHouseDetail();
    }
  },
  methods: {
    On53() {
      window.open(
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1",
        "_blank"
      );
      this.stopBubbling(event);
    },
    stopBubbling(e) {
      e = window.event || e;
      if (e.stopPropagation) {
        e.stopPropagation(); //阻止事件 冒泡传播
      } else {
        e.cancelBubble = true; //ie兼容
      }
    },
    Onorder() {
      let token = sessionStorage.getItem("token");
      console.log(token);
      if (!token) {
        this.$message({
          message: "请先登录",
          type: "warning"
        });
        this.dialogTableVisible = true;
      } else if (this.details.ynAppointment == 2) {
        this.instance
          .addAppointmentHouse({
            houseId: this.details.id,
            houseTitle: this.details.title,
            userId: sessionStorage.getItem("userId")
          })
          .then(res => {
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          })
          .catch(function(error) {});
      }
    },
    Onfollow() {
      let token = sessionStorage.getItem("token");
      console.log("111");
      if (!token) {
        this.$message({
          message: "请先登录",
          type: "warning"
        });
        // this.dialogTableVisible = true;
      } else if (this.details.ynFollow == 1) {
        this.instance
          .cancelHouseFollow({
            id: this.details.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.$message({
                message: "已取消关注",
                type: "warning"
              });
              this.details.ynFollow = 2;
            }
          })
          .catch(function(error) {});
      } else if (this.details.ynFollow == 2) {
        this.instance
          .addHouseFollow({
            houseId: this.details.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.$message({
                message: "关注成功",
                type: "warning"
              });
            }
            this.details.ynFollow = 1;
          })
          .catch(function(error) {});
      }
    },
    Onmanager(val) {
      this.$router.push({ name: "Manager", query: { id: val } });
    },
    Onloan() {
      this.disable = true;
    },
    OnId(val) {
      console.log(val);
      this.id = val;
      this.OngetHouseDetail();
    },
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.second = 60;
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.input3
        })
        .then(res => {
          if (res.data.code == 0) {
            // this.show = false;
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
          this.$message({
            message: res.data.msg
          });
        })
        .catch(function(error) {});
    },
    OngetHouseDetail() {
      console.log(this.id);
      this.instance
        .getHouseDetail({
          id: this.id
        })
        .then(res => {
          // this.$message(res.data.msg);
          console.log(res.data);
          // if (res.data.code == 0) {
          this.details = res.data.data;
          // }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    Ondiong() {
      console.log("111");
      // childValue就是子组件传过来的值
      this.dialogTableVisible = false;
    },
    OnpersonalLoan() {
      if (this.input3 == "" && this.input3.length == 11) {
        this.$notify({
          message: "请输入正确的手机号码",
          duration: 2000
        });
      } else {
        if (this.input == this.verifyCode && this.input != "") {
          this.instance
            .personalLoan({
              telephone: this.input3,
              verifyCode: this.input
            })
            .then(res => {
              this.$message(res.data.msg);
              if (res.data.code == 0) {
                this.disable = false;
              }
            })
            .catch(function(error) {});
        } else {
          this.$message("请输入正确的验证码");
        }
      }
    },
    Onremind() {
      this.instance
        .addRemind({
          id: this.details.id
        })
        .then(res => {
          this.$message(res.data.msg);
        })
        .catch(function(error) {});
    }
  },
  components: {
    Header,
    Footer,
    Recommend,
    Swiper,
    vueQr,
    Map,
    Right,
    LoginName
  }
};
</script>
<style lang="less" scoped>
.qrcode {
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}
img {
  vertical-align: middle;
}
p {
  font-size: 14px;
}
.zoon {
  height: 80px;
}
.crumb {
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0px;
  color: #999999;
  font-size: 14px;
}
.house {
  width: 1200px;
  margin: 0 auto;
  .house_name {
    overflow: hidden;
    .name_left {
      float: left;

      font-size: 24px;
    }
    .name_right {
      cursor: pointer;
      float: right;
      .right_img {
        img {
          width: 20px;
        }
      }
      span {
        margin-right: 30px;
      }
    }
  }
  .village {
    margin: 20px 0px;
    font-size: 14px;
    color: #747474;
  }
  .house_center {
    display: flex;
    .carousel {
      width: 730px;
      height: 500px;
      margin-right: 30px;
    }
    .center {
      width: 430px;
      .center_font {
        font-size: 12px;
        color: #b5b5b5;
      }
      .tariff {
        padding: 15px 0 24px 0;
        border-bottom: 1px solid #b5b5b5;
        .price {
          font-size: 38px;
          color: #f47f57;
          .company {
            font-size: 14px;
            color: #f47f57;
          }
        }
        .market {
          font-size: 14px;
          color: #333;
          margin-left: 10px;
        }
      }
      .house_type {
        padding: 25px 10px 0 10px;
        border-bottom: 1px solid #b5b5b5;
        overflow: hidden;

        div {
          float: left;
          width: 33.3%;
          margin-bottom: 30px;
        }
        .allTypes {
          .room {
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
          }
          .room_title {
            font-size: 12px;
            color: #999;
          }
        }
      }
      .alldetails {
        font-size: 14px;
        overflow: hidden;
        margin-top: 14px;
        p {
          float: left;
          width: 31.3%;
          margin-bottom: 20px;
        }
      }
      .details_name {
        color: #999;
        margin-right: 5px;
      }
      .details_center {
        color: #333;
      }
      .remind {
        cursor: pointer;
        color: #f47f57;
        font-size: 14px;
        margin-left: 10px;
      }
      .details_line {
        margin-bottom: 10px;
      }
    }
  }
}

.loan {
  width: 1200px;
  margin: 0 auto;
  padding: 40px 0 50px 0;
}
.agent {
  cursor: pointer;
  padding: 24px 15px;
  width: 428px;
  height: 90px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  display: flex;
  margin-top: 18px;
  position: relative;
  .portrait {
    width: 40px;
    height: 38px;
    border-radius: 50%;
    margin-right: 15px;
  }
  p {
    margin-bottom: 17px;
  }
  .name {
    font-size: 16px;
    color: #000;
    margin-right: 10px;
  }
  .broker {
    color: #f47f57;
    font-size: 12px;
    background: #ffd7ca;
    padding: 2px 6px;
  }
  .peoper {
    font-size: 12px;
    color: #856b5f;
    span {
      margin-right: 10px;
    }
  }
  .consult {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 94px;
    height: 36px;
    background: #ffeee9;
    border: 1px solid #f57f57;
    border-radius: 2px;
    text-align: center;
    color: #f98461;
    font-size: 12px;
    line-height: 36px;
  }
}
.village {
  width: 1200px;
  margin: 0 auto;
  .village_title {
    font-size: 24px;
    color: #333333;
    margin-left: 10px;
  }
  .village_name {
    font-size: 16px;
    margin-top: 30px;
    color: #333333;
    margin-bottom: 23px;
    .address {
      font-weight: bold;
    }
  }
  .introduce {
    display: flex;
    .introduce_top {
      margin-right: 40px;
      min-width: 730px;
      .present {
        width: 730px;
        border-bottom: 1px solid #fef2ee;
        overflow: hidden;
        p {
          float: left;
          width: 50%;
          font-size: 16px;
          color: #333;
          margin-bottom: 23px;
          .introduce_title {
            color: #a9abad;
            margin-right: 5px;
          }
        }
      }
      .buildings {
        font-size: 14px;
        color: #333;
        margin: 21px 0;
      }
      .buildings_item {
        span {
          font-size: 14px;
          background: #f9f9fb;
          border-radius: 2px;
          color: #575757;
          padding: 8px;
          margin-right: 20px;
        }
      }
    }
  }
  .agent_title {
    width: 100%;
    padding-bottom: 17px;
    border-bottom: 1px solid #fef2ee;
    font-size: 14px;
    color: #333;
  }
  .progress {
    height: 52px;
    background: #f9f9fb;
    border-radius: 6px;
    text-align: center;
    line-height: 52px;
    font-size: 12px;
    color: #878787;
    margin-top: 16px;
  }
}
.periphery {
  width: 1200px;
  margin: 0 auto;
  padding-top: 30px;
  .village_title {
    font-size: 24px;
    color: #333333;
    margin-left: 10px;
  }
  .map {
    margin-top: 28px;
    height: 540px;
  }
}
.loan_dialog {
  .title {
    font-size: 24px;
    text-align: center;
    color: #343434;
    .text {
      color: #f58058;
    }
  }
  .nothing {
    display: flex;
    margin: 40px 0;
    text-align: center;
    div {
      width: 33.3%;

      font-size: 14px;
      color: #666;
    }
  }
  .obtain {
    cursor: pointer;
    color: #f58058;
  }
  .loan_btn {
    cursor: pointer;
    width: 300px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #f58058;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    margin: 30px auto 10px;
  }
}
</style>
<style>
.loan_dialog > .el-dialog {
  width: 508px !important;
}
.loan_dialog
  > .el-dialog
  > .el-dialog__body
  > .el-input-group
  > .el-input-group__append {
  border: 1px solid #f58058;
}
.loan_dialog
  > .el-dialog
  > .el-dialog__body
  > .el-input-group
  > .el-input__inner {
  border: 1px solid #f58058;
}
.loan_dialog > .el-dialog > .el-dialog__body > .el-input > .el-input__inner {
  border: 1px solid #f58058;
}
</style>
<style scoped>
@import "../../assets/css/swiper.min.css";
.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 415px;
  width: 100%;
}
.gallery-top img {
  width: 97%;
  height: 415px;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs img {
  width: 122px;
  height: 90px;
}

/* .gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
} */
</style>
